<template>
  <div class="list">
    <div class="like">猜你喜欢</div>
    <div class="line">
        <ul class="textbox">
        <li>综合排序</li>
        <li>距离最近</li>
        <!-- <li @click="handclick(index)" v-for="(item,index) in goodlist" :key="index" class="{active:currentIndex==index}">{{item.desc}}</li> -->
        <li>销量最高</li>
        <li>筛选</li>
    </ul>
    <div class="choosebox">
        <span class="choose" v-for="(item,index) in textlist" :key="index">{{(item.msg)}}</span>
    </div>

    <div class="food">
        <div class="good" v-for="(item,index) in foodlist" :key="index">
            <div class="img-box">
                <img :src="item.picUrl" alt="">
            </div>
        <div class="foodtext">
            <!-- 商品名 -->
            <div class="name">{{item.name}}</div>
            <!-- 销售量 -->
            <div class="sell">{{item.monthSalesTip}}</div>
            <!-- 描述 -->
            <div class="desc">{{item.averagePriceTip}}</div>
            <!-- 评价 -->
            <div class="evaluate">{{item.distance}}</div>
            <!-- 满减 -->
            <div class="full">{{item.wmPoiScore}}</div>
        </div>
        </div>
    </div>
    
    </div>
  </div>
</template>

<script>
// 导入图片
import img from '../assets/4.jpg'
import {shop_list} from '../api'


export default {
    name:'App',
    data(){
        return {
            textlist:[{msg:'年货节热卖'},{msg:'津贴联盟'},{msg:'满减优惠'},{msg:'品质联盟'}],
            
            foodlist:[]
        }
    },
    methods:{
        handclick(index){
            this.currentIndex = index;
            //如果当前所点击的下标等于元素下标，
        }
    },
    mounted(){
        shop_list().then((res)=>{
            this.foodlist=res.data.list
            console.log(res);
        })
    }
}
</script>

<style scoped>

    .list{
        width: 100%;
    }
    .list .like{
        font-weight: bold;
        margin-left: 10px;
    }
    .list .line .textbox{
        display: flex;
        justify-content: space-around;
        font-size: 12px;
        font-weight: 700;
        margin-top: 10px;
        list-style: none;
    }
    /* .list .line .textbox .active{
        color: red;
        font-weight: bold;
    } */
    .list .line .choosebox{
        font-size: 12px;
        display: flex;
        justify-content: space-around;
        padding: 5px;
        margin-top: 10px;
    }
    .list .line .choosebox .choose{
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #ccc;
        color: black;
    }
    .food{
        margin: 10px;
        
    }
    .food .good{
        display: flex;
        height: 170px;
        margin: 0px 5px;
    }
    .food .good .img-box{
        width: 110px;
        height: 100px;
    }
    .food .good img{
        width: 100%;
        margin-top: 26px;
        border: 1px solid #ccc;
    }
    .food .good .foodtext{
        flex: 1;
        margin-left: 10px;
    }
    .food .good .foodtext .name{
        font-size: 20px;
        font-weight: bold;
        margin-top: 20px;
    }
    .food .good .foodtext .sell{
        font-size: 12px;
        color: #555;
    }
    .food .good .foodtext .desc{
        font-size: 12px;
        color: #555;
    }
    .food .good .foodtext .evaluate{
        color: orange;
        background-color: rgba(255, 228, 196, 0.557);
        font-size: 12px;
    }
    .food .good .foodtext .full{
        width: 50px;
        padding: 2px;
        font-size: 12px;
        color: rgb(248, 80, 8);
        border: 1px solid rgb(247, 77, 58);
        margin-top: 8px;
    }

</style>